<template>
	<view class="page">
		<!-- date -->
		<div style="display: flex;align-items: center;">
			<div style="background-color: #F1F1F1;flex: 1;height: 1px;"></div>
			<div style="padding: 0 12px;">8-01</div>
			<div style="background-color: #F1F1F1;flex: 1;height: 1px;"></div>
		</div>
		<!-- buttons -->
		<div style="display: flex;align-items: center;justify-content: space-around;margin-top: 12px;">
			<div style="padding: 3px 10px;font-size: 12px;border-radius: 20px;border: 1px solid #007AFF;">全部</div>
			<div style="padding: 3px 10px;font-size: 12px;border-radius: 20px;border: 1px solid #007AFF;">聊天记录</div>
			<div style="padding: 3px 10px;font-size: 12px;border-radius: 20px;border: 1px solid #007AFF;">邮件记录</div>
			<div style="padding: 3px 10px;font-size: 12px;border-radius: 20px;border: 1px solid #007AFF;">跟进记录</div>
			<div style="padding: 3px 10px;font-size: 12px;border-radius: 20px;border: 1px solid #007AFF;">事件</div>
		</div>
		<!-- page -->
		<!-- cell email -->
		<div style="padding: 6px 12px;">
			<div style="display: flex;">
				<div style="font-size: 12px;">张三</div>
				<div style="font-size: 12px;margin-left: 12px;">2021年10月11日17:45:05</div>
			</div>
			<!-- body -->
			<div style="display: flex;margin-top: 12px;align-items: flex-start;">
				<div
					style="padding: 3px 6px;color: #007AFF;border: 1px solid #007AFF;font-size: 12px;border-radius: 20px;">
					邮件</div>
				<div style="flex: 1;margin-left: 5px;">
					<!-- title -->
					<div style="">
						<span style="font-size: 12px;font-weight: bold;">主题:</span>
						<span style="font-size: 12px;margin-left: 12px;">2021年10月11日17:45:05</span>
					</div>
					<!-- content -->
					<div style="margin-top: 5px;">
						<span style="font-size: 12px;font-weight: bold;">内容:</span>
						<span
							style="font-size: 12px;margin-left: 12px;">2021年10月11日17:45:052021年10月11日52021年10月11日52021年10月11日52021年10月11日52021年10月11日52021年10月11日17:45:052021年10月11日17:45:052021年10月11日17:45:052021年10月11日17:45:05</span>
					</div>
				</div>
			</div>
		</div>
		<!-- cell chat -->
		<div style="padding: 6px 12px;">
			<div style="display: flex;">
				<div style="font-size: 12px;">张三</div>
				<div style="font-size: 12px;margin-left: 12px;">2021年10月11日17:45:05</div>
			</div>
			<!-- body -->
			<div style="display: flex;margin-top: 12px;align-items: flex-start;">
				<div
					style="padding: 3px 6px;color: #007AFF;border: 1px solid #007AFF;font-size: 12px;border-radius: 20px;">
					聊天</div>
				<div style="flex: 1;margin-left: 5px;">
					<!-- user -->
					<div style="">
						<div style="font-size: 12px;">2021-10-11 17:58:07</div>
						<div style="font-size: 12px;">老牛</div>
						<!-- content -->
						<div style="display: flex;flex-wrap: wrap;">
							<div
								style="font-size: 12px;padding: 3px 6px;background-color: #007AFF;color: #FFFFFF;max-width: 70%;">
								在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗</div>
						</div>
					</div>
					<!-- my -->
					<div style="margin-top: 3px;">
						<div style="font-size: 12px;text-align: right;">2021-10-11 17:58:07</div>
						<div style="font-size: 12px;text-align: right;">老牛</div>
						<!-- content -->
						<div style="display: flex;flex-wrap: wrap;flex-direction: row-reverse;">
							<div
								style="font-size: 12px;padding: 3px 6px;background-color: #007AFF;color: #FFFFFF;max-width: 70%;text-align: right;">
								在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- action -->
		<div style="padding: 6px 12px;display: flex;justify-content: center;">
			<div style="padding: 5px 10px;background-color: #e5e5e5;display: flex;align-items: center;border-radius: 20px;">
				<div style="font-size: 12px;">2021-10-11 18:04:31</div>
				<div style="font-size: 12px;">张三签约</div>
				<div style="font-size: 12px;">状态有商机转为学生</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.page {
		flex: 1;
		padding: 0 12px;
	}
</style>
